import React,{useState} from 'react'
import { Button, Tabs } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import withLogin from '../../hoc/withLogin'
import { CalendarPickerView } from 'antd-mobile'
import { Popup, } from 'antd-mobile'
function Home() {
    const nav = useNavigate()
    const [visible5, setVisible5] = useState(false)
    return (
        <div>
            <div>
                <h2 style={{ textAlign: 'center' }}>订票</h2>
                <p>一张票·一段旅程·享受自由</p>
            </div>
            <div style={{ paddingTop: '5vw' }}>
                <Tabs>
                    <Tabs.Tab title='机票' key='fruits'>
                        <Tabs>
                            <Tabs.Tab title='单程' key='fruits'>
                                <div style={{
                                    fontSize: '10vw', display: 'flex',
                                    justifyContent: 'space-between',
                                    marginTop: '5vh'
                                }}>
                                    <span onClick={() => nav('/city')}>北京</span>
                                    <LoopOutline />
                                    <span onClick={() => nav('/city')}>上海</span>
                                </div>
                                <div style={{ marginTop: '5vh' }}><span style={{ fontSize: '5vw' }} onClick={()=>setVisible5(true)}>11月1日</span><span style={{ color: 'gray' }}>明天</span></div>
                                <div style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    marginTop: '5vh',
                                    marginBottom: '5vh'
                                }}><span>经济/公务/头等舱</span><span>1成人0儿童0婴儿</span>
                                    <Popup
                                        visible={visible5}
                                        onMaskClick={() => {
                                            setVisible5(false)
                                        }}
                                        bodyStyle={{
                                            borderTopLeftRadius: '8px',
                                            borderTopRightRadius: '8px',
                                            minHeight: '40vh',
                                        }}
                                    >
                                        <CalendarPickerView />
                                    </Popup>
                                </div>
                                <Button block style={{ '--background-color': 'yellow' }}>开始搜索</Button>
                            </Tabs.Tab>
                            <Tabs.Tab title='往返' key='vegetables'>
                                西红柿
                            </Tabs.Tab>
                            <Tabs.Tab title='多程' key='animals'>
                                蚂蚁
                            </Tabs.Tab>
                            <Tabs.Tab title='特价' key='aaa'>
                                蚂蚁
                            </Tabs.Tab>
                        </Tabs>
                    </Tabs.Tab>
                    <Tabs.Tab title='火车票' key='vegetables'>
                        西红柿
                    </Tabs.Tab>
                    <Tabs.Tab title='汽车票' key='animals'>
                        蚂蚁
                    </Tabs.Tab>
                    <Tabs.Tab title='船票' key='ab'>
                        蚂蚁
                    </Tabs.Tab>
                </Tabs>
            </div>


        </div>
    )
}

export default withLogin(Home)